---
description: Learn how configure React Native with Expo to use Triplit in your mobile app.
---

import { Tabs, Tab, Callout, Steps } from 'nextra-theme-docs';

# React Native

React Native is the best way to run Triplit on a mobile app. The hooks available in the [React package](/frameworks/react) are also available in React Native.

## Expo

If you are using Expo to setup your React Native project, you can follow these steps to get Triplit up and running.

<Steps>
### Create an Expo project and install Triplit

Create your expo project:

```bash
npx create-expo-app -t expo-template-blank-typescript

cd my-app
```

For more information on setting up an Expo project with typescript see the [Expo documentation](https://docs.expo.dev/guides/typescript/).

Next, install Triplit's packages:

<Callout type="warning">
  There is currently a bug in how Triplit handles optional dependencies in
  Metro, so you will need to install `uuidv7` as a dependency in your project.
  This is a temporary workaround until the bug is fixed.
</Callout>

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']}>
  <Tab>
    ```bash copy
    npm i @triplit/client @triplit/react-native uuidv7
    npm i @triplit/cli --save-dev
    ```
  </Tab>
  <Tab>
    ```bash copy
    pnpm add @triplit/client @triplit/react-native uuidv7
    pnpm add @triplit/cli --save-dev
    ```

  </Tab>
  <Tab>
    ```bash copy
    yarn add @triplit/client @triplit/react-native uuidv7
    yarn add @triplit/cli --dev
    ```

  </Tab>
  <Tab>
    ```bash copy
    bun add @triplit/client @triplit/react-native uuidv7
    bun add @triplit/cli --dev
    ```
    
    </Tab>
</Tabs>

### Configure polyfills

Triplit was originally built to run in web browsers, so a few APIs are used in some core packages and dependencies that are not in the ECMAScript spec that Hermes implements. So you will need to add some polyfills to your project.

These polyfills should be imported or implemented in your project's entry file so they can be run as early as possible. Typically this is your `index.js` file. If you are using Expo Router see this [thread](https://github.com/expo/expo/discussions/25122) on creating and using an `index.js` file to add polyfills.

```javascript
// Import polyfills relevant to Triplit
import '@triplit/react-native/polyfills';
// ... other polyfills

// If using Expo Router:
import 'expo-router/entry';

// The rest of your entry file
```

### Use React hooks

Triplit's [React](/frameworks/react) hooks are also exported via `@triplit/react-native`, so you can use them in your components just like you would in a web app.

```typescript
import { useQuery } from '@triplit/react-native';

const { results } = useQuery(client, client.query('todos'));
```

### Additional configuration

#### Update metro.config.js (metro \< `0.82.0`)

If you are using a Metro version before `0.82.0`, you will need to add a custom Metro config to your project. This is encompasses most users using Expo 52 and below. This is because Triplit uses some features that are not supported by the Metro bundler, notably the [exports](https://nodejs.org/docs/latest-v18.x/api/packages.html#package-entry-points) field.

To determine the version of Metro that is installed, run the following command:

<Tabs items={['npm', 'pnpm', 'yarn', 'bun']} >
  <Tab>
    ```bash copy
    npm list metro
    ```
  </Tab>
  <Tab>
    ```bash copy
    pnpm list metro
    ```

  </Tab>
  <Tab>
    ```bash copy
    yarn list --pattern metro
    ```

  </Tab>
  <Tab>
    ```bash copy
    bun pm ls metro --json
    ```

    </Tab>

</Tabs>

Below is an example output with version `0.82.3` installed:

```bash {7}
$ npm list metro
my-app@0.0.1 /path/to/my-app
└─┬ react-native@0.79.2
  └─┬ @react-native/community-cli-plugin@0.79.2
    ├─┬ metro-config@0.82.3
    │ └── metro@0.82.3 deduped
    └─┬ metro@0.82.3
      └─┬ metro-transform-worker@0.82.3
        └── metro@0.82.3 deduped
```

If you are using a version prior to `0.82.0`, Triplit provides a utility for generating a custom Metro config that will resolve these exports. If you have not already created a `metro.config.js` file, please see the Expo docs on properly [configuring Metro](https://docs.expo.dev/guides/customizing-metro/). Once you have created a `metro.config.js` file, you can add the following code to properly resolve Triplit packages:

```javascript
const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
const { triplitMetroConfig } = require('@triplit/react-native/metro-config');

module.exports = triplitMetroConfig(config);
```

If you would like more control over dependency resolution, you can import `triplitMetroResolveRequest` and use it inside a custom resolver.

```javascript
const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
const {
  triplitMetroResolveRequest,
} = require('@triplit/react-native/metro-config');

config.resolver.resolveRequest = (context, moduleName, platform) => {
  const triplitResult = triplitMetroResolveRequest(moduleName);
  if (triplitResult) return triplitResult;

  // Additional resolver logic

  return context.resolveRequest(context, moduleName, platform);
};

module.exports = config;
```

#### Configure Babel (web only)

If you are building for the web, you'll need to update a babel configuration file. At the root of your Expo project, create a `babel.config.js` file with the following content:

```javascript
module.exports = function (api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
    assumptions: {
      enumerableModuleMeta: true,
    },
  };
};
```

#### Configure a development build

If you are using Expo Go, you can skip this step. However, if you are building a custom [development build](https://docs.expo.dev/develop/development-builds/introduction/) of your app, you will also need to perform the following steps to ensure Triplit works correctly:

1. Install `expo-crypto`

```bash
npx expo install expo-crypto
```

</Steps>

### Local development

When running a local development server on your machine, it will be running at `localhost`. However if you are running your app on a physical device (ie your phone with the Expo Go app or a custom build) you will need to change the `localhost` to your machine's IP address. You can find your IP address by running `ipconfig getifaddr en0` in your terminal. So a URL `http://localhost:<port>` would become `http://<your-ip>:<port>`.

## Storage providers

Triplit provides storage providers for React Native applications to persist data on the device, including for `expo-sqlite`. Read more about the available storage providers in the [client storage documentation](/client/storage#in-react-native).

## Bare React Native

The team over at Triplit hasn't had the chance to test out a bare React Native project. Although we don't expect the required steps to be much different than with Expo, there may be differences. If you have set up Triplit in a bare RN project, please let us know how it went!
